<template>
  <div>
    <div class="tc pointer people-content" @click="goSelect">{{iniLabel ?'已选择:'+ iniLabel : panelTitle + '>'}}</div>
    <zm-panel :title="panelTitle" :visible.sync="formVisible" @change="panelClose" v-if="formVisible">
      <zm-form label-width="120px" :model="form" ref="zmForm" :rules="formRule">
        <zm-form-item v-if="rowInfo.nodeType !== '1'" label="请选择" prop="accountType">
          <zm-data-radio v-model="form.accountType" :list="typeList" @change="changeType"></zm-data-radio>
        </zm-form-item>
        <zm-form-item label="请选择部门" prop="accountId" v-if="form.accountType === '1'">
          <tree-select ref="refTreeSelect" v-model="form.accountId" :tree="departmentList" :disabled-id="disAccountId" :is-checkbox="true" placeholder="请选择部门" class="w320"></tree-select>
        </zm-form-item>
        <zm-form-item label="请选择员工" prop="accountId" v-if="form.accountType === '3'">
          <permission-tree-copy v-if="!loading" ref="permissionCopy" v-model="form.accountId" :tree="staffList" :is-check-all="false" :tree-props="{valueKey:'id',label:'name',children:'accountData'}"></permission-tree-copy>
        </zm-form-item>
      </zm-form>
      <div slot="footer" class="tr">
        <el-button @click="panelClose">取消</el-button>
        <el-button @click="submit" type="primary">确定</el-button>
      </div>
    </zm-panel>
  </div>
</template>
<script>
import panelMixin from '@/mixins/panelMixin'
import TreeSelect from '@/components/TreeSelect'
import PermissionTreeCopy from './PermissionTreeCopy'
import publicApis from '@/api/src/public'

export default {
  components: { TreeSelect, PermissionTreeCopy },
  mixins: [panelMixin],
  props: {
    rowInfo: {
      type: Object,
      default: () => {
        return {}
      }
    },
    value: {
      type: String,
      default: ''
    },
    departmentList: {
      type: Array,
      default: () => {
        return []
      }
    },
    staffList: {
      type: Array,
      default: () => {
        return []
      }
    },
    iniLabel: {
      type: String,
      default: ''
    },
    disAccountId: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      loading: false,
      form: {
        accountType: '1',
        accountId: '',
        accountLabel: '',
        staffId: ''
      },
      formVisible: false,
      typeList: [
        { value: '1', name: '指定部门' },
        { value: '3', name: '指定员工' }
      ],
      formRule: {
        accountId: [
          {
            required: true,
            message: '请选择',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    panelTitle () {
      let map = { 0: '', 1: '发起人', 2: '审批人', 3: '抄送人' }
      return '选择' + map[this.rowInfo.nodeType]
    }
  },
  watch: {},
  created () {
  },
  methods: {
    goSelect () {
      this.formVisible = true
      this.form.accountId = this.rowInfo.accountId
      this.form.accountType = this.rowInfo.accountType ? this.rowInfo.accountType : '1'
    },
    changeType (val) {
      this.$set(this.form, 'accountId', '')
      if (+val === 1) {
        this.$refs.refTreeSelect.clearSelect()
      } else if (+val === 3) {
        this.loading = true
        this.$nextTick(() => {
          this.loading = false
        })
      }
    },
    panelClose () {
      this.formVisible = false
      this.close()
    },
    submit () {
      let _valid = false
      this.$refs.zmForm.validate(valid => {
        _valid = valid
      })
      if (!_valid) return
      this.formVisible = false
      this.panelClose()
      this.$emit('after-choose', this.form)
    }
  }
}
</script>
